<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
<link rel="stylesheet" type="text/css" href="css/imageView.css"/>
<style type="text/css">
/**index-list***/
.list-item{
	background: #fff;
	padding:10px;
	margin-bottom:10px;
}
.list-item-t{
	display: flex;
	display: -webkit-flex;
	position: relative;
	padding-bottom: 10px;
}
.item-t-sl{
	display: block;
	width:50px;
	height:50px;
	background: #ccc;
	border-radius:50px;
	overflow: hidden;
}
.item-t-sr{
	-webkit-flex: 1;
	-webkit-box-flex: 1;
	position: relative;
	padding:5px 0 0 10px;
}
.item-t-sr-t{
	font-size: 18px;
	padding-bottom:20px;
	line-height: 100%;
	height: 17px;
	width:75%;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.list-item-c{
	font-size: 16px;
	padding-bottom: 10px;
	line-height:25px;
	color: #555;
	word-break:break-all;
}
.item-t-sr-b{
	color: #999;
	font-size: 14px;
	width:75%;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.list-item-b{
	display: flex;
	display: -webkit-flex;
	justify-content:space-between;
	-webkit-justify-content: space-between;
	flex-wrap:wrap;
	-webkit-flex-wrap: wrap;
}
.ib-imgitem{
	width: auto;
	height: auto;
	-webkit-box-flex: 1;
	background:#ddd;
	margin-bottom: 5px;
	overflow: hidden;
	font-size: 0;
	overflow: hidden;
}
.ib-imgitem.ib-imgitem100{
	width: 100%;
}
.item-t-srb-gz{
	float: right;
	position: absolute;
	right: 0;
	background:#ccc ;/*#FFC72C;*/
	color: #fff;
	padding:5px 15px 5px 15px;
	border-radius: 100px;
	font-size: 12px;
}
.item-t-srb-gz.yiguanzhu{
	background:#FFC72C;/**/
}
.list-item-b2{
	display: flex;
	position: relative;
	padding: 10px 0 0 0;
	font-size:14px;
}
.list-item-btn{
	display: block;
	width: 33.333333%;
	-webkit-box-flex: 1;
	color: #999;
	border-right: 1px solid #eee;
}
.list-item-btn:last-child{
	border-right-width: 0;
}
.tright{
	text-align: right;
}
.topic{
	width: 100%;
	height:45px;
	background: #ddd;
	padding: 5px;
}
#seachinput{
	display: block;
	height:35px;
	font-size: 14px;
	background: url(img/search.png) left center no-repeat #fff;
	background-size: 20px 20px;
	text-indent: 20px;
	box-shadow:0 0 1px #ccc;
	border-width: 0;
	-webkit-box-shadow:0 0 1px #ddd;
}
#jcontent{
	padding-bottom: 15px;
}
.list-item-btn.red{
	color: orangered;
}
</style>
</head>
<body>
<div id="jcontent" class="jcontent">
	<div class="topic">
		<input class="taped taped-11" readonly="readonly" id="seachinput" type="text" placeholder="请输入搜索关键字"/>
	</div>
	<div id="index-toppic"><img src="./img/1.png"  class="img"/></div>
	<div id="data-list"></div>
	<div id="nodatas" class="nodatas">
		<span class="nodatas-icon"><i class="iconfont icon-wjl nodataicons"></i></span>
		<div class="nodata-tip">对不起，未找到相关数据!</div>
	</div>
	<div id="loadingMore">加载更多</div>
</div>
<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="js/page.js" type="text/javascript" charset="utf-8"></script>
<script src="js/template.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.lazyload.js"></script>
<script src="js/mui.lazyload.img.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.zoom.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.previewimage.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
var _currentWebview;
var previewImageApi;
var lazyLoadApi ;
mui.plusReady(function(){
	_currentWebview=plus.webview.currentWebview();
	mui.previewImage(); 
	lazyLoadApi = mui(document).imageLazyload({
		autoDestroy: false,
		duration:300
	});
	//默认从缓存中加载数据 
	loadUtil.loadList({
		url:"/carLife/common/interface/dynamic/selectFocusDynamic",
		callBack:function(){
			imgAjaxLazy();
		}
	});
	//滚动到底部
	document.addEventListener( "plusscrollbottom",function(){
		loadUtil.scrollBottom({
			callBack:function(){
				imgAjaxLazy();
			}
		});
	}, false );
	//下拉加载最新数据 
	_currentWebview.setPullToRefresh(webapp.config.pullRefresh,function(){
		loadUtil.pullToRefresh({
			callBack:function(){
				imgAjaxLazy();
			}
		});
	});
});

function imgAjaxLazy(){
	window.setTimeout(function(){
		lazyLoadApi.refresh(true);
	},100);
}

//加载数据
function loadList(){
	loadUtil.loadList({
		url:"/carLife/common/interface/dynamic/selectFocusDynamic",
		callBack:function(){
			imgAjaxLazy();
		}
	});
}

/**
 * 点击事件
 */
mui('#jcontent').on('tap','.taped', function() {
	var　_classList=this.classList;
	if(_classList.contains("taped-1")){
		var businessId=this.getAttribute("business-sellerId");
		webapp.openByTpl({
			title:"商家详情",
			hrefs:"/tpl/4s.html?business="+businessId
		});
	}else if(_classList.contains("taped-2")){
		var thisId=this.getAttribute("data-id");
		webapp.openByTpl({
			title:"评论",
			hrefs:"/tpl/addpinglun.html?from=index&id="+thisId,
			ricon:"发送"
		});
	}else if(_classList.contains("taped-3")){
		dianzan(this);
	}else if(_classList.contains("taped-4")){
		//关注
		guanzhu(this);
	}else if(_classList.contains("taped-5")){
		var thisId=this.getAttribute("data-id");
		webapp.openByTpl({
			title:"动态详情",
			hrefs:"/tpl/detail.html?id="+thisId
		});
	}else if(_classList.contains("taped-10")){
		var thisId=this.getAttribute("data-id");
		webapp.openByTpl({
			title:"动态转发",
			hrefs:"/tpl/zhuanfa.html?type=1&id="+thisId,
			ricon:"发布"
		});
	}else if(_classList.contains("taped-11")){
		//搜索
		var thisId=this.getAttribute("data-id");
		webapp.openByTpl({
			title:"关键字搜索",
			hrefs:"/tpl/search.html?keyword="+document.getElementById("seachinput").value
		});
	}else if(_classList.contains("taped-51")){
		 
	}
});

/**
 * 下拉事件，给其他页面调用
 */
window.addEventListener("pullDown", function(e) {
	//下拉加载最新数据 
	loadUtil.pullToRefresh({
		callBack:function(){
			imgAjaxLazy();
		}
	});
	window.setTimeout(function(){
		plus.webview.getTopWebview().hide("auto");
		webapp.closeWaiting();
	},360);
});

/**
 * 监听评论事件
 */
window.addEventListener("commentNumUpdate", function(e) {
	if(e.detail.code == 200){
		var num = parseInt(document.getElementById("commentNum"+e.detail.id).innerHTML);
		document.getElementById("commentNum"+e.detail.id).innerHTML=num + 1;
	}
});

/**
 * 监听登录事件
 */
window.addEventListener("userLogin", function(e) {
	if(e.detail.code == 200){
		window.location.reload();
	}
});

/**
 * 监听转发事件
 */
window.addEventListener("forwordNumUpdate", function(e) {
	if(e.detail.code == 200){
		var num = parseInt(document.getElementById("forwordNum"+e.detail.id).innerHTML);
		document.getElementById("forwordNum"+e.detail.id).innerHTML=num + 1;
	}
});

/**
 * 监听关注按钮
 */
window.addEventListener("followStateUpdate", function(e) {
	var sellerArr = document.getElementsByName("follow_seller"+e.detail.id);
	if(e.detail.code == 200){
		for(var i=0;i<sellerArr.length;i++){
			sellerArr[i].classList.add("yiguanzhu");
			sellerArr[i].innerHTML = "已关注"
		}
	}else if(e.detail.code == 201){
		for(var i=0;i<sellerArr.length;i++){
			sellerArr[i].classList.remove("yiguanzhu");
			sellerArr[i].innerHTML = "关注"
		}
	}
});
 
/**
 * 监听搜索事件
 */
window.addEventListener("searchList", function(e) {
	webapp.showWaiting();
	document.getElementById("seachinput").value=e.detail.keyword;
	document.getElementById("data-list").innerHTML="";
	loadUtil.loadList({
		url:"/carLife/common/interface/dynamic/selectFocusDynamic?keyword="+e.detail.keyword
	});
	//清空数据区域
	window.setTimeout(function(){
		plus.webview.getTopWebview().hide("auto");
	},350);
});

/**
 * 监听搜索事件
 */
window.addEventListener("seachByCity", function(e) {
	var city=e.detail.city;
	var keyword=document.getElementById("seachinput").value;
	webapp.showWaiting();
	document.getElementById("data-list").innerHTML="";
	loadUtil.loadList({
		url:"/carLife/common/interface/dynamic/selectFocusDynamic?keyword="+keyword+"&city="+city,
		resetConfig:true
	});
	//清空数据区域
	window.setTimeout(function(){
		plus.webview.getTopWebview().hide("auto");
	},450);
});


/**
 * 点赞
 * @param {Object} ele 被点击的元素
 */
function dianzan(ele){
	var _id=ele.getAttribute("data-id");
	var countEle=document.getElementById("dianzannum_"+_id);
	var nowCount=parseInt(countEle.innerHTML);
	//发送点赞请求
	webapp.ajax({
		url:"/carLife/admin/interface/praise/isOrNotPraise",
		data:{targetId:ele.getAttribute("data-id"),type:1},
		success:function(json){			
			plus.nativeUI.toast(json.msg);
//			if(json.code == 200){
//				document.getElementById("count-2").innerHTML = parseInt(document.getElementById("count-2").innerHTML) + 1;
//			}else if(json.code == 201){
//				document.getElementById("count-2").innerHTML = parseInt(document.getElementById("count-2").innerHTML) - 1;
//			}
			if(json.code=="200"){
				ele.classList.add("red");
				//+1
				countEle.innerHTML=nowCount+1;
			}else{
				ele.classList.remove("red");
				//-1
				countEle.innerHTML=nowCount-1;
			}
		}
	});
}


/*
 * 关注
 * @param {Object} ele 被点击的元素
 */
function guanzhu(ele){
	var _id=ele.getAttribute("data-id");
	if(ele.classList.contains("yiguanzhu")){
		mui.toast("取消关注请进入4S店主页操作");
		return false;	
	}
	
	//发送关注请求
	webapp.showWaiting();
	webapp.ajax({
		url:"/carLife/admin/interface/followMessage/isOrNotFollow",
		data:{sellerId:_id},
		success:function(json){
			guanzhuCallback(json,ele,_id);
		}
	});
}

function guanzhuCallback(json,ele,id){
	//关注后，在本地设置一个缓存用于判断是否已经关注过某个4s店
	if(json.code=="200"){
		//页面上所有的该商家的动态上的关注按钮加样式 并显示已关注
		var sellerArr = document.getElementsByName("follow_seller"+id);
		for(var i=0;i<sellerArr.length;i++){
			sellerArr[i].classList.add("yiguanzhu");
			sellerArr[i].innerHTML = "已关注";
		}
		ele.innerHTML="已关注";
		ele.classList.add("yiguanzhu");
		window.localStorage.setItem("GUANZHU_"+id,"1");
	}
	webapp.closeWaiting();
	mui.toast(json.msg);
}

/**
 * 
 * 发布帖子
 * 
 */
window.addEventListener("indexRiconClick", function(e) {
	var user=webapp.getUser();
	if(user != null && user.type!="1"){
		mui.toast("4S店才能发布动态");
		return false;
	}
	webapp.openByTpl({
		title:"发布动态",
		ricon:"发布",
		hrefs:"/tpl/addDongtai.html"
	});
});
</script>

<script id="tpl-list" type="text/html">
{{each data as item i}}
<div id="tpl-list" class="list-item"  data-id="{{item.id}}">
		<div class="list-item-t">
			<a class="item-t-s item-t-sl taped taped-1" business-sellerId="{{item.sellerId}}">
				<img class="img" data-lazyload="{{imgPath}}{{item.logoImageMap.path}}-120{{item.logoImageMap.type}}" src="img/zw.png"/>
			</a>
			<div class="item-t-s item-t-sr" >
				<div class="item-t-sr-t" >{{item.sellerName}}</div>
				<div class="item-t-sr-b" > {{item.timeGrade}} 来自{{item.createUser}}</div>
			</div>
			{{if item.isFollow==1}}
			<a data-id="{{item.sellerId}}" class="item-t-srb-gz yiguanzhu taped taped-4" name="follow_seller{{item.sellerId}}">已关注</a>
			{{else}}
			<a data-id="{{item.sellerId}}" class="item-t-srb-gz taped taped-4" name="follow_seller{{item.sellerId}}">关注</a>
			{{/if}}
		</div>
		<div class="list-item-c taped taped-5" data-id="{{item.id}}">
			{{item.content}}
		</div>
		<div class="list-item-b" data-id="{{item.id}}">
			{{if item.imagesList.length>0}}
				{{each item.imagesList as imgeItem j}}
					{{if item.imagesList.length==1}}
					<div id="item-imgs-item-{{j}}" class="ib-imgitem ib-imgitem100 taped taped-51">
						<img class="img" data-lazyload="{{imgPath}}{{imgeItem.path}}-320{{imgeItem.type}}" src="img/zw3.png"  data-preview-src="{{imgPath}}{{imgeItem.path}}-640{{imgeItem.type}}" data-preview-group="{{item.id}}"/>
					</div>
					{{else}}
					<div id="item-imgs-item-{{j}}" class="ib-imgitem taped taped-51" style="width:{{imgW}}px;height: {{imgW}}px;">
						<img class="{{if imgeItem.proportion==1}}img{{else if proportion==2}}img{{else}}imgw{{/if}}" data-lazyload="{{imgPath}}{{imgeItem.path}}-120{{imgeItem.type}}" src="img/zw2.png"  data-preview-src="{{imgPath}}{{imgeItem.path}}-640{{imgeItem.type}}" data-preview-group="{{item.id}}"/>
					</div>
					{{/if}}
				{{/each}}
				{{if item.imagesList.length==2 || item.imagesList.length==5 || item.imagesList.length==8}}
					<div class="ib-imgitem noimg" style="width:{{imgW}}px;height: {{imgW}}px;"></div>
				{{/if}}
			{{/if}}
		</div>
		<div class="list-item-b2 line-t">
			<a class="list-item-btn  btn2  taped taped-10"  data-id="{{item.id}}">
				<i class="iconfont icon-zhuanfa"></i>
				转发（<span id="forwordNum{{item.id}}">{{item.forwardNum}}</span>）
			</a>
			<a  class="list-item-btn tcenter taped taped-2"  data-id="{{item.id}}">
				<i class="iconfont icon-pinglun"></i>
				评论（<span id="commentNum{{item.id}}" >{{item.commentNum}}</span>）
			</a>
			<a class="list-item-btn  tright  taped taped-3" data-id="{{item.id}}">
				<i class="iconfont icon-i9"></i>
				点赞（<span id="dianzannum_{{item.id}}">{{item.praiseNum}}</span>）
			</a>
			
		</div>
	</div>
{{/each}}
</script>
</body>
</html>
